<*****封面页*****>
<template>
	<div class="reportPage">
		<div class="reportPageWrap">
			<header>
		        <img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:9.714em;height:auto;" />
		    </header>
		    <main class="coverContent">
			    <div class="title">
					<h1>{{title}}</h1>
					<h2>分析报告</h2>
					<!--<small>NO.HT20100002</small>-->
				</div>
				<div class="infoList">
					<p v-for="(item,index) in data" :key="index"><span class="itemLabel">{{item.title}}</span><span class="itemValue">{{item.value}}</span></p>
				</div>
			</main>
			<page-footer v-if="showFooter == '1'" :configAddress="configAddress" :configInstruction="configInstruction"></page-footer>
		</div>
		<img src="../../assets/exam/bg.jpg" alt="" class="pageBg" />
	</div>
</template>

<script>
	import baseURL from '@/api/index'
	import { getLogoImg } from '@/api/login.js'
	import pageFooter from '@/components/report/pageFooter.vue'
	export default {
		name: 'cover',
		components: {
			pageFooter
		},
		props:{
			title:{
				type:String,
				default:'-'
			},
			data:{
				type:Array,
				default(){
					return [];
				}
			},
			showFooter: {
				type: String,
				default: () => '0'
			},
			configAddress: {
				type: String,
				default: () => ''
			},
			configInstruction: {
				type: String,
				default: () => ''
			},
		},
		data() {
			return {
				sysLogo:'',
				showSysLogo:true
			}
		},
		watch: {
			
		},
		filters: {

		},
		computed: {

		},
		mounted() {
			// this.sysLogo = `${baseURL}/sdn/sys/menu/sysImage?sysType=2&label=1`
			this.getLogo()
		},
		beforeDestroy() {

		},
		methods: {
			hideSysLogo() {
				this.showSysLogo = false;
			},
			// 获取系统浏览器标签的图标
			getLogo () {
				let params = {
					// systemType:'designer'
					systemType: 'exp'
				}
				getLogoImg(params)
					.then(res => {
						if (res.data.code === 1) {
							let getData = res.data.data || []
							let image = getData.find((item) => item.logoType == 'report')
							if (image) {
								if (image.hidden !== 'disable') {
									this.sysLogo = '/files' + image.logo
									console.log('🚀 ~ file: cover.vue:80 ~ getLogo ~ this.sysLogo:', this.sysLogo)
								}
							}
							// this.sysLogo = 'data:image/png;base64,'+res.data.data[0].logo
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
		},
		destroyed() {

		}
	}
</script>

<style scoped>
	.reportPage {
		position: relative;
		box-shadow: 0 0 5px #ccc;
		width: 42.5em;
		height: 60.143em;
		margin: 1.85em 0;
		padding: 2em;
	}
	.reportPageWrap {
		margin: 0 !important;
		position: absolute;
		left: 1.85em;
		right: 1.85em;
		top: 1.85em;
		bottom: 1.85em;
		z-index: 2;
	}
	.pageBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.title{
		text-align:center;
		margin-top:10em;
	}
	h1{
		font-size:2em;
		color: #1b1c29;
	}
	h2{
		margin:1em 0;
		font-size:1.57em;
		color: #1b1c29;
	}
	.coverContent{
		height: 86.5%;
		width:100%;
		display: flex;
    	flex-direction: column;
    	align-items: center;
	}
	.infoList p {
		border-bottom: 1px solid #d8dde0;
		margin-top: 1em;
		padding: .5em 1em 0.5em 0;
	}
	.infoList .itemValue {
		margin-left: 1em;
		font-size: 1em;
		color: #333;
	}
	.infoList .itemLabel {
		display: inline-block;
		width: 5em;
		text-align: justify;
		vertical-align: top;
		text-align-last: justify;
		font-size: 1em;
		color: #666;
	}
</style>